<style type="text/css" scoped src="../styles/login.css"></style>
<template>
<div class="loginBox">
    <div id="particles" class="loginback">
    </div>
    <Row type="flex" justify="center" align="middle">
        <Col :lg="{span:7}" :md="{span:11}" :sm="{span:15}" :xs="{span:22}">
        <div class="loginDiv">
            <Row>
                <Col span=24><div style="margin-bottom:40px;"><h1>蚕桑填报系统</h1></div></Col>
            </Row>
            <Row>
                <Col span=24 align="middle">
                        <Form ref="UserModel" :model="UserModel" :rules="UserRule">
                            <row>
                                <Form-item prop="Account">
                                    <Input type="text" v-model="UserModel.Account" size="large" placeholder="请输入用户名"  @keydown.enter="LoginIn('UserModel')">
                                        <Icon type="person" slot="prepend" size='22' color="#104E8B"></Icon>用户名
                                    </Input>
                                </Form-item>
                                <Col span="24" >
                                    <Form-item prop="Passwords">
                                        <Input type="password" v-model="UserModel.Passwords" size="large" placeholder="请输入密码"  @keydown.enter="LoginIn('UserModel')">
                                            <Icon type="locked" slot="prepend" size='22' color="#104E8B"></Icon>密&nbsp;&nbsp;&nbsp;码
                                        </Input>
                                    </form-item>
                                </Col>
                                <Col span="12">
                                    <Form-item prop="validateCode">
                                        <Input type="text" v-model="UserModel.validateCode" size="large" placeholder="请输入验证码"  @keydown.enter.native="LoginIn('UserModel')">
                                            <Icon type="android-checkmark-circle" size='22' slot="prepend" color="#104E8B"></Icon>验证码:
                                        </Input>
                                    </form-item>
                                </Col>
                                <Col span="8" style="float:right">
                                <div @click="createCode" class="code" id="checkCode" title="点击切换"></div>
                                </Col>
                                <Col span="24">
                                    <div style="float:left;padding-bottom: 10px;color: #3a80c5">
                                        <Checkbox v-model="rember">
                                            <Icon type="bookmark"></Icon>
                                            <span>记住密码</span>
                                        </Checkbox>
                                    </div>
                                </Col>
                                <Col span="24">
                                    <form-item>
                                        <i-button type="primary" size="large" long @click="LoginIn('UserModel')"  @keyup.enter.native="LoginIn('UserModel')">登录 </i-button>
                                    </form-item>
                                </Col>
                            </row>
                        </Form>
                    </Col>
                </Row> 
            </div>
        </Col>
    </Row>
</div>
</template>
<script>
import JParticles from 'jparticles';
export default{
	data:function(){
        //验证码验证
         const validateVerCode = (rule, value, callback) => {
                if (value === '') {
                     callback(new Error('请输入验证码！'));
                } else {
                    if (value.toUpperCase() !== this.verCode.toUpperCase()) {
                        callback(new Error('验证码不正确!'));
                    }
                    callback();
                }
            }
	      return {
                rember:true,
                verCode:'',
		        UserModel: {
	            Account: '',
	            Passwords: '',
                validateCode:''
	        },
	        UserRule: {
	            Account: [
	                { required: true, message: '请填写登录帐号', trigger: 'blur' }
	            ],
	            Passwords: [
	                { required: true, message: '请填写登录密码', trigger: 'blur' },
	                { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
	            ],
                validateCode:[
                    { validator:validateVerCode, trigger: 'blur' }
                ]
	        }
	      }
	},
    mounted() {
        new JParticles.particle('#particles', {
            color: '#ffffff',
            range: 20,
            proximity: 1,
            parallax: false
        });
    },
     methods: {
               LoginIn (name) {//登录事件
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var self=this;
                        self.$http.post('Account',self.UserModel).then(function(res){
                            if(res.data.status==1)
                            {
                                // console.log(res.data.model);
                                var CurrentUserModel=new Object();
                                CurrentUserModel.Account=res.data.model.Account;
                                CurrentUserModel.UserId=res.data.model.Id;
                                CurrentUserModel.UserName=res.data.model.UserName;
                                CurrentUserModel.AreaCode=res.data.model.AreaCode;
                                CurrentUserModel.UnitName=res.data.model.UnitName;
                                self.SetlocaStorage("CSuserinfo",CurrentUserModel);
                                self.SetlocaStorage("useractionlist", res.data.model.ActionList);
                                if (res.data.model.LastLoginTime == null) {
                                    self.$router.push('/userinfo');//登录跳转
                                } else {
                                    self.$router.push('/home');//登录跳转
                                }
                            }
                            else{
                                self.$Modal.error({title:'提示信息',content:res.data.message});
                            }
                        })
                    }
                })
            },
            //重置
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            createCode() {//创建验证码
            this.verCode = "";
            var codeLength = 4; //验证码的长度
            var checkCode = document.getElementById("checkCode");
            var codeChars = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
            for (var i = 0; i < codeLength; i++) {
                var charNum = Math.floor(Math.random() * 52);
                this.verCode += codeChars[charNum];
            }
            if (checkCode) {
                checkCode.className = "code";
                checkCode.innerHTML = this.verCode;
            }
        },
        getAreaTreeData() {
            var self = this;
            self.$http.get('Area/GetCascaderTree', { params: { id: "" } }).then(function (res) {
                self.SetlocaStorage("areatreelist", res.data.model);
            });
        },
        getAreaData() {
            var self = this;
            this.$http.get('Area').then(function (res) {
                self.SetlocaStorage("arealist", res.data.model);
            });
        },
        getDictData() {
            var self = this;
            this.$http.get('Dict/GetList').then(function (res) {
                self.SetlocaStorage("dictlist", res.data.model);
            });
        },
    },
    //创建Vue页面方法
    created: function () {
        //this.RememberPassword();
        this.getAreaTreeData();
        this.getAreaData();
        this.getDictData();
        setTimeout(() => {
            this.createCode();
        }, 500);

    }

}
</script>